<template>
    <div class="complaint-management">
        <!-- 操作栏 -->
        <div class="operation-bar">
            <el-input
                v-model="searchText"
                placeholder="搜索投诉编号/投诉人/问题类型"
                style="width: 360px"
                clearable
            >
                <template #prefix>
          <el-icon><Search /></el-icon>
        </template>
            </el-input>
             <el-button type="primary" @click="handleAdd">
        <el-icon><Plus /></el-icon>新建投诉
            </el-button>
        </div>

        <!-- 数据表格 -->
        <el-table :data="filteredComplaints"
         border
         style="width: 100%"
        header-row-class-name="table-header"
        stripe
        highlight-current-row
        >
            <el-table-column prop="complaintId" label="投诉编号" width="220" sortable />
            <el-table-column prop="customer" label="投诉人" width="180" />
            <el-table-column prop="issueType" label="问题类型" width="180">
                <template #default="{ row }">
                    <el-tag :type="typeTagType[row.issueType]">{{ row.issueType }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="submitDate" label="提交时间" width="213">
                <template #default="{ row }">
                    {{ formatDate(row.submitDate) }}
                </template>
            </el-table-column>
            <el-table-column prop="content" label="投诉内容" width="400">
                <template #default="{ row }">
                    <span v-if="row.content.length > 20">{{ row.content.slice(0, 20) }}...</span>
                    <span v-else>{{ row.content }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="status" label="处理状态" width="200">
                <template #default="{ row }">
                    <el-tag :type="statusType[row.status]">
                        {{ statusOptions.find(s => s.value === row.status)?.label }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="200">
                <template #default="{ row }">
                    <el-button size="small" @click="handleEdit(row)">编辑</el-button>
                    <el-button size="small" type="danger" @click="handleDelete(row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 添加/编辑对话框 -->
        <el-dialog
            v-model="dialogVisible"
            :title="isEditMode ? '编辑投诉记录' : '新建投诉'"
            width="680"
        >
            <el-form
                ref="formRef"
                :model="formData"
                :rules="formRules"
                label-width="100px"
                label-position="left"
            >
                <el-form-item label="投诉编号" prop="complaintId">
                    <el-input v-model="formData.complaintId" :disabled="isEditMode" />
                </el-form-item>
                <el-form-item label="投诉人" prop="customer">
                    <el-input v-model="formData.customer" />
                </el-form-item>
                <el-form-item label="问题类型" prop="issueType">
                    <el-select v-model="formData.issueType" placeholder="请选择类型" style="width: 100%">
                        <el-option
                            v-for="item in issueTypes"
                            :key="item"
                            :label="item"
                            :value="item"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="提交时间" prop="submitDate">
                    <el-date-picker
                        v-model="formData.submitDate"
                        type="datetime"
                        placeholder="选择日期时间"
                        value-format="YYYY-MM-DD HH:mm:ss"
                    />
                </el-form-item>
                <el-form-item label="投诉内容" prop="content">
                    <el-input type="textarea" v-model="formData.content" rows="3" />
                </el-form-item>
                <el-form-item label="处理状态" prop="status">
                    <el-select v-model="formData.status" placeholder="请选择状态">
                        <el-option
                            v-for="item in statusOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="submitForm">确认</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, computed, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 日期格式化（包含时间）
const formatDate = (dateString) => {
    if (!dateString) return ''
    const date = new Date(dateString)
    return date.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
    }).replace(/\//g, '-')
}

// 问题类型（影院常见投诉类型）[6,7](@ref)
const issueTypes = [
    '放映延迟',
    '退票纠纷',
    '3D眼镜收费',
    '座椅损坏',
    '空调异常',
    '服务态度',
    '影厅卫生',
    '消防通道堵塞',
    '广告超时',
    '设备故障'
]

// 标签样式映射（影院主题色）
const typeTagType = {
    '放映延迟': 'warning',
    '退票纠纷': 'danger',
    '3D眼镜收费': 'success',
    '座椅损坏': 'danger',
    '空调异常': 'info',
    '服务态度': 'warning',
    '影厅卫生': 'danger',
    '消防通道堵塞': 'danger',
    '广告超时': 'warning',
    '设备故障': 'danger'
}

// 处理状态选项[3](@ref)
const statusOptions = [
    { value: 0, label: '待处理' },
    { value: 1, label: '处理中' },
    { value: 2, label: '已解决' }
]
const statusType = { 0: 'danger', 1: 'warning', 2: 'success' }

// 10条影院投诉测试数据[6,7,8](@ref)
const complaints = ref([
    {
        id: 1,
        complaintId: 'CIN202406001',
        customer: '王女士',
        issueType: '放映延迟',
        submitDate: '2024-06-01 19:15:00',
        content: '19:00场次《[复仇者联盟](@replace=10001)》延迟15分钟放映，未提前告知且未补偿',
        status: 0
    },
    {
        id: 2,
        complaintId: 'CIN202406002',
        customer: '张先生',
        issueType: '退票纠纷',
        submitDate: '2024-06-02 14:30:00',
        content: '购票后因急病申请退票，平台与影院互相推诿拒绝退款',
        status: 1
    },
    {
        id: 3,
        complaintId: 'CIN202406003',
        customer: '李同学',
        issueType: '3D眼镜收费',
        submitDate: '2024-06-03 11:00:00',
        content: '强制要求购买3D眼镜，收费15元且未提前告知',
        status: 2
    },
    {
        id: 4,
        complaintId: 'CIN202406004',
        customer: '陈女士',
        issueType: '座椅损坏',
        submitDate: '2024-06-04 16:45:00',
        content: 'IMAX厅A排12座电动调节功能失效，导致观影体验极差',
        status: 0
    },
    {
        id: 5,
        complaintId: 'CIN202406005',
        customer: '赵先生',
        issueType: '空调异常',
        submitDate: '2024-06-05 10:20:00',
        content: '影厅温度低至18℃，多名观众反映需要穿外套观影',
        status: 1
    },
    {
        id: 6,
        complaintId: 'CIN202406006',
        customer: '周女士',
        issueType: '影厅卫生',
        submitDate: '2024-06-06 15:10:00',
        content: '发现座椅残留爆米花碎屑和饮料渍，清洁不到位',
        status: 2
    },
    {
        id: 7,
        complaintId: 'CIN202406007',
        customer: '吴同学',
        issueType: '广告超时',
        submitDate: '2024-06-07 13:25:00',
        content: '映前广告长达25分钟，远超规定的10分钟限制',
        status: 0
    },
    {
        id: 8,
        complaintId: 'CIN202406008',
        customer: '郑先生',
        issueType: '设备故障',
        submitDate: '2024-06-08 18:00:00',
        content: '4DX影厅震动特效全程未启动，严重影响观影体验',
        status: 1
    },
    {
        id: 9,
        complaintId: 'CIN202406009',
        customer: '孙女士',
        issueType: '消防通道堵塞',
        submitDate: '2024-06-09 08:45:00',
        content: '安全出口被按摩椅和广告展架堵塞，存在安全隐患',
        status: 2
    },
    {
        id: 10,
        complaintId: 'CIN202406010',
        customer: '林先生',
        issueType: '服务态度',
        submitDate: '2024-06-10 17:30:00',
        content: '工作人员处理投诉时态度恶劣，拒绝提供工号',
        status: 0
    },
    {
        id: 7,
        complaintId: 'CIN202406007',
        customer: '吴同学',
        issueType: '广告超时',
        submitDate: '2024-06-07 13:25:00',
        content: '映前广告长达25分钟，远超规定的10分钟限制',
        status: 0
    },
    {
        id: 8,
        complaintId: 'CIN202406008',
        customer: '郑先生',
        issueType: '设备故障',
        submitDate: '2024-06-08 18:00:00',
        content: '4DX影厅震动特效全程未启动，严重影响观影体验',
        status: 1
    },
    {
        id: 9,
        complaintId: 'CIN202406009',
        customer: '孙女士',
        issueType: '消防通道堵塞',
        submitDate: '2024-06-09 08:45:00',
        content: '安全出口被按摩椅和广告展架堵塞，存在安全隐患',
        status: 2
    },
    {
        id: 10,
        complaintId: 'CIN202406010',
        customer: '林先生',
        issueType: '服务态度',
        submitDate: '2024-06-10 17:30:00',
        content: '工作人员处理投诉时态度恶劣，拒绝提供工号',
        status: 0
    },
    {
        id: 3,
        complaintId: 'CIN202406003',
        customer: '李同学',
        issueType: '3D眼镜收费',
        submitDate: '2024-06-03 11:00:00',
        content: '强制要求购买3D眼镜，收费15元且未提前告知',
        status: 2
    },
    {
        id: 4,
        complaintId: 'CIN202406004',
        customer: '陈女士',
        issueType: '座椅损坏',
        submitDate: '2024-06-04 16:45:00',
        content: 'IMAX厅A排12座电动调节功能失效，导致观影体验极差',
        status: 0
    },
    {
        id: 5,
        complaintId: 'CIN202406005',
        customer: '赵先生',
        issueType: '空调异常',
        submitDate: '2024-06-05 10:20:00',
        content: '影厅温度低至18℃，多名观众反映需要穿外套观影',
        status: 1
    }
])

// 搜索功能（支持多字段模糊搜索）
const searchText = ref('')
const filteredComplaints = computed(() => {
    const searchKey = searchText.value.toLowerCase()
    return complaints.value.filter(complaint => {
        return [
            complaint.complaintId,
            complaint.customer,
            complaint.issueType,
            complaint.content
        ].join('').toLowerCase().includes(searchKey)
    })
})

// 对话框状态管理
const dialogVisible = ref(false)
const isEditMode = ref(false)
const formRef = ref(null)
const formData = reactive({
    id: null,
    complaintId: '',
    customer: '',
    issueType: '',
    submitDate: new Date().toISOString().split('.')[0],
    content: '',
    status: 0
})

// 表单验证规则
const formRules = {
    customer: [
        { required: true, message: '请输入投诉人姓名', trigger: 'blur' },
        { min: 2, max: 10, message: '姓名长度2-10个字符' }
    ],
    issueType: [{ required: true, message: '请选择问题类型', trigger: 'change' }],
    submitDate: [{ required: true, message: '请选择提交时间', trigger: 'change' }],
    content: [
        { required: true, message: '请填写投诉内容', trigger: 'blur' },
        { min: 20, max: 200, message: '内容长度20-200个字符' }
    ],
    status: [{ required: true, message: '请选择处理状态', trigger: 'change' }]
}

// 操作函数
const handleAdd = () => {
    isEditMode.value = false
    resetForm()
    dialogVisible.value = true
}

const handleEdit = (row) => {
    isEditMode.value = true
    Object.assign(formData, { ...row })
    dialogVisible.value = true
}

const handleDelete = (id) => {
    ElMessageBox.confirm('确定删除该投诉记录？删除后将不可恢复！', '警告', {
        confirmButtonText: '确认删除',
        cancelButtonText: '取消操作',
        type: 'warning'
    }).then(() => {
        complaints.value = complaints.value.filter(c => c.id !== id)
        ElMessage.success('投诉记录已删除')
    })
}

const submitForm = async () => {
    await formRef.value.validate()
    if (isEditMode.value) {
        const index = complaints.value.findIndex(c => c.id === formData.id)
        complaints.value.splice(index, 1, { ...formData })
    } else {
        complaints.value.push({
            ...formData,
            id: Date.now(),
            submitDate: formData.submitDate || new Date().toISOString().split('.')[0]
        })
    }
    dialogVisible.value = false
}

const resetForm = () => {
    formData.id = null
    formData.complaintId = ''
    formData.customer = ''
    formData.issueType = ''
    formData.submitDate = new Date().toISOString().split('.')[0]
    formData.content = ''
    formData.status = 0
}
</script>

<style scoped>
.complaint-management {
    padding: 24px;
    background: #1a1a2e; /* 影院暗夜蓝背景 */
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(231,76,60,0.1); /* 影院红阴影 */
    min-height: 100vh;
}

.operation-bar {
    padding: 16px 24px;
    background: rgba(40,40,60,0.9); /* 深灰背景 */
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(231,76,60,0.2); /* 影院红阴影 */
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.el-table {
    margin-top: 36px;
    background: rgba(40,40,60,0.9); /* 深灰背景 */
    /* height: 50px; */
}

.el-tag {
    font-weight: 500;
}

.el-textarea__inner {
    height: 80px;
}

/* 调整表格行高亮颜色 */
.el-table--striped .el-table__body tr.el-table__row--striped td {
    background: rgba(52,152,219,0.1); /* 科技蓝透明背景 */
    /* width: 90px; */
    height: 100px;
}
</style>